<template>
  <div class="app-container calendar-list-container partner">
    <div class="header">
      <el-select @change="quertStatus" v-model="statusOptionsDefault" placeholder="请选择">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div class="filter-container">
        <el-button class="filter-item" style="float:right" @click="handleCreate" type="primary" icon="el-icon-edit">新增</el-button>
      </div>
      <div class="partner-search">
        <el-input v-model="partnerSearch" placeholder="请输入合作方名称/公众号名称" @keyup.enter.native="searchBlur" @blur="searchBlur"></el-input>
        <i class="el-icon-search"></i>
      </div>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%" max-height="580">
      <el-table-column width="150px" align="center" label="编号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="250px" align="center" label="名称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="创建时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.status_text}}</span>
        </template>
      </el-table-column>
      <el-table-column width="250px" align="center" label="公众号">
        <template slot-scope="scope">
          <span>{{scope.row.public_account}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="250px" label="公众号ID">
        <template slot-scope="scope">
          <span>{{scope.row.public_account_id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="350" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="view" size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button type="primary" class="float-none" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status!='published'" size="mini" type="warning" @click="handleReset(scope.row)">重置
          </el-button>
          <el-button v-if="scope.row.status!='3'" size="mini" type="success" @click="handleFreeze(scope.row,scope.row.status_text)">{{statusText(scope.row.status_text)}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[5,10,20,30, 50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
  .partner .el-dialog {
    width: 40%!important;
  }
  .partner .header > div {
    float: left;
  }
  .partner .header .partner-search {
    width: 20%;
    float: right;
    margin-right: 50px;
    position: relative;
  }
  .el-input {
    width: 240px;
  }
  .el-input >>> input {
    text-indent: 10px !important;
  }
  .float-none:hover {
    float: none !important;
  }
  .partner .header .partner-search i {
    position: absolute;
    top: 30%;
    left: 5px;
    color: rgb(228,229,233);
  }
  .partner .header .filter-container {
    float: right;
  }
</style>

<script>
import { getList, resetPassword, update } from '@/api/partner'
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      partnerSearch: '',
      listQuery: {
        page: 1,
        status: 0,
        selectword: '',
        'per-page': 10
      },
      temp: {
        id: undefined,
        username: '',
        account: '',
        phone: '',
        status: '',
        created_at: '',
        auth_key: ''
      },
      statusOptionsDefault: '所有状态',
      statusOptions: [{
        value: 0,
        label: '所有状态'
      }, {
        value: 1,
        label: '正常'
      }, {
        value: 2,
        label: '冻结'
      }]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    quertStatus() {
      this.$set(this.listQuery, 'status', this.statusOptionsDefault)
      this.getList()
    },
    searchBlur() {
      this.$set(this.listQuery, 'selectword', this.partnerSearch)
      this.getList()
    },
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data._meta.totalCount
        this.listLoading = false
      })
    },
    userValue() {
      this.temp.username = this.temp.username.replace(/[^\d\w_]/ig, '')
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery['per-page'] = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    // 查看成员信息详情
    handleView(row) {
      this.$router.push({ path: '/partner/view/' + row.id })
    },
    // 新增
    handleCreate() {
      this.$router.push({ path: '/partner/add' })
    },
    // 编辑
    handleUpdate(row) {
      this.$router.push({ path: '/partner/update/' + row.id })
    },
    // 重置
    handleReset(row) {
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9a-zA-z]{6,20}$/,
        inputErrorMessage: '密码只支持6~20位数字和字母',
        inputValidator: () => {
        }
      }).then(({ value }) => {
        const data = {
          id: row.id,
          newpwd: value
        }
        console.log(value)
        resetPassword(data).then(() => {
          this.$message({
            type: 'success',
            message: '你的新密码是: ' + value
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 冻结
    handleFreeze(row, status) {
      if (status === '正常') {
        this.$confirm('冻结后账号将无法登录，您确认要冻结吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          update({ status: 2 }, row.id).then(() => {
            this.$message({
              type: 'success',
              message: '冻结成功!'
            })
            this.getList()
          })
        }).catch(() => {
        })
      } else if (status === '冻结') {
        this.$confirm('您确认要恢复账号吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          update({ status: 1 }, row.id).then(() => {
            this.$message({
              type: 'success',
              message: '恢复成功!'
            })
            this.getList()
          })
        }).catch(() => {
        })
      }
    },
    statusText(text) {
      if (text === '正常') {
        text = '冻结'
      } else if (text === '冻结') {
        text = '恢复'
      }
      return text
    }
  }
}
</script>
